<template>
  <section class="foot-carousel">
    <div class="container">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 text-center">
          <h1 class="jumbo-h1">{{t('want')}}</h1>
          <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <div>{{t('energy')}}</div>
              </div>
              <div class="item">
                <div>{{t('optimise')}}</div>
              </div>
              <div class="item">
                <div>{{t('innovation')}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  /** lib **/
  // vue
  import {
    onMounted
  } from 'vue'
  // i18n
  import {
    useI18n
  } from 'vue-i18n'
  /** logic **/
  import initCarousel from './carousel'
  export default {
    setup() {
      // onMounted Hooks
      onMounted(() => {
        initCarousel()
      })

      return {
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "want": "是否想要",
  "energy":"节约能源？",
  "optimise":"优化你的活动？",
  "innovation":"推动开放式创新？"
  },
  "en": {
  "want": "DO YOU WANT",
  "energy":"TO SAVE ENERGY?",
  "optimise":"TO OPRIMISE YOUR ACTIVITY?",
  "innovation":"TO PROMOTE OPEN INNOVATION?"
  },
  "ja": {
  "want": "あなたは欲しい",
  "energy":"エネルギーを節約するには？",
  "optimise":"あなたの活動を最適化するには？",
  "innovation":"オープンイノベーションを促進するには？"
  }
  }
</i18n>

<style scoped>
  section.foot-carousel {
    font-family: OpenSans-Semibold;
    background: #504b57;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  h1.jumbo-h1 {
    margin: 0;
    color: white;
    font-size: 40px;
    line-height: 50px;
    font-weight: 300;
    text-transform: uppercase;

  }

  .carousel.slide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
  }
</style>